<template>
    <div>
        <slot name="input" :value-text="valueText" :show-picker="showPickerFun">
            <van-field class="buildPageInput" :value="valueText" :label="label" placeholder="" readonly :rules="rules"
                :is-link="!disabled" @click="showPickerFun" :required="required" :disabled="disabled" />
        </slot>
        <van-popup v-model="pickerShow" round position="bottom">
            <van-cascader v-model="pickerValue" :title="pickerTitle" @close="pickerShow = false" @finish="onFinish"
                :options="options" :field-names="fieldNames" />
        </van-popup>
    </div>
</template>
<script>
export default {
    name: 'cascader',
    props: {
        label: {
            type: String,
            default: ''
        },
        value: {},
        disabled: {
            type: Boolean,
            default: false
        },
        pickerTitle: {
            type: String,
            default: ''
        },
        rules: {
            type: Array,
            default() {
                return []
            }
        },
        required: {
            type: Boolean,
            default: false
        },
        options: {
            type: Array,
            default() {
                return []
            }
        },
        fieldNames: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            pickerShow: false,
            pickerValue: '',
            pickerText: ''
        }
    },
    computed: {
        valueText() {
            let text = this.findPathbyId(this.options || [], this.value)
            return (text && text.join("/")) || ''
        }
    },
    methods: {
        showPickerFun() {
            this.pickerShow = true
            this.pickerValue = this.value
        },
        // 全部选项选择完毕后，会触发 finish 事件
        onFinish({ selectedOptions ,value}) {
            this.$emit('input', this.pickerValue)
            this.$emit('change', value)
            this.$emit('objChange', selectedOptions[selectedOptions.length-1])
            this.pickerShow = false;
            // this.pickerText = selectedOptions.map((option) => option[this.fieldNames.text || 'text']).join('/');
        },
        findPathbyId(tree, id, path) {
            if (typeof path === 'undefined') {
                path = []
            }
            for (let i = 0; i < tree.length; i++) {
                let tempPath = [...path]
                tempPath.push(tree[i][this.fieldNames.text || 'text'])
                if (tree[i][this.fieldNames.value || 'value'] === id) {
                    return tempPath
                }
                if (tree[i][this.fieldNames.children || 'children']) {
                    const reuslt = this.findPathbyId(tree[i][this.fieldNames.children || 'children'], id, tempPath)
                    if (reuslt) {
                        return reuslt
                    }
                }
            }
        }
    }

}
</script>